<template>
	<view class="content">
		<u-navbar title="屏蔽企业" :border-bottom="false"></u-navbar>
		<u-search class="u-m-t-20" v-model="data.value" @input="onSearch" :show-action="false"></u-search>
		<view class="content_main">
			<view class="search_tip" v-if="data.searchTip">
				<view class="tx1">通过以下方式搜索公司</view>
				<view class="tx2">公司全称：如“百度（中国）有限公司”</view>
				<view class="tx2">公司简称：如“百度”</view>
				<view class="tx2">屏蔽企业后，该企业将无法查看您的简历</view>
			</view>
			<view class="search_empty" v-if="data.list.length == 0 && !data.searchTip">
				没有搜到您搜索的公司
			</view>
			<view class="content_main_ls" v-if="data.list.length > 0">
				<view class="result_title">
					与“{{ data.value }}”有关的公司，共{{ data.list.length }}个
				</view>
				<view class="content_main_ls_item u-border-bottom" v-for="item in data.list" :key="item.id">
					<view class="u-flex" v-if="item.in_blacklist == 0">
						<u-checkbox @change="checkbox" :name="item.id" shape="circle" v-model="item.check"></u-checkbox>
						<view>
							<view class="u-line-1 u-white-60">
								{{item.companyname}}
							</view>
							<view class="u-m-t-10 u-font-12" style="color: #ABABAB">
								{{`${item.scale_text} · ${item.trade_text} · ${item.nature_text}`}}
							</view>
						</view>
					</view>
					<view v-else class="u-p-l-70 u-flex u-row-between" style="color: #ABABAB;">
						<view>
							<view class="u-line-1 u-white-60">
								{{item.companyname}}
							</view>
							<view class="u-m-t-10 u-font-12">
								{{`${item.scale_text} · ${item.trade_text} · ${item.nature_text}`}}
							</view>
						</view>
						<view>
							已屏蔽
						</view>
					</view>
				</view>
			</view>
		</view>


		<u-bottom-button v-if="data.list.length > 0" :confirmText="`屏蔽所选企业（${data.selectList.length}）`"
			@confirm="confirm"></u-bottom-button>
	</view>
</template>

<script setup>
	import {
		reactive,
		watch
	} from "vue";
	const data = reactive({
		// 搜索框输入内容
		value: '',
		// 根据关键字获取到的企业列表
		list: [],
		// 显示操作指引
		searchTip: true,
		// 已选屏蔽企业列表
		selectList: []
	})
	const checkbox = (e) => {
		if (e.value) {
			let res = data.list.filter(item => item.id == e.name)
			data.selectList.push(res[0])
		} else {
			data.selectList.splice(
				data.selectList.findIndex(
					item => parseInt(item.id) === parseInt(e.name)
				),
				1
			)
		}
	}
	// 根据关键字获取企业列表
	const getSearchCompany = async (value) => {
		let params = {
			keyword: value
		}
		let res = await uni.$u.api.getSearchCompany({
			params
		})
		data.searchTip = false
		data.list = res.items.map(item => {
			return {
				...item,
				check: false
			}
		})
	}
	// 搜索回调事件
	const onSearch = async (value) => {
		if (uni.$u.test.isEmpty(value)) {
			data.searchTip = true
			data.list = []
			return
		}
		getSearchCompany(value)
	}
	// 屏蔽所选企业
	const confirm = async () => {
		if (data.selectList.length == 0) return uni.$u.toast('请选择要屏蔽的企业')
		let id = data.selectList.map(item => {
			return item.id
		})
		let params = {
			id
		}
		let res = await uni.$u.api.addBlacklist(params)
		uni.$u.toast('添加成功')
		uni.$u.route({
			type: 'back'
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx;

		&_main {
			padding: 0 20rpx;

			&_ls {
				width: 100%;
				background-color: #ffffff;
				padding-bottom: 180rpx;

				.result_title {
					font-size: 24rpx;
					color: #999999;
					padding: 20rpx 48rpx 0 0;
				}

				&_item {
					padding: 30rpx 0;
					color: #101010;
					font-size: 28rpx;
				}
			}
		}

		.search_empty {
			width: 100%;
			padding-top: 486rpx;
			text-align: center;
			font-size: 30rpx;
			color: #999999;
			background: url("/pages/pagesPersonal/static/personal/search_empty_bg.png") center 250rpx no-repeat;
			background-size: 284rpx 200rpx;
		}

		.search_tip {
			.tx2 {
				font-size: 30rpx;
				color: #666666;

				&:not(:last-child) {
					padding-bottom: 15rpx;
				}
			}

			.tx1 {
				font-size: 36rpx;
				color: #333333;
				font-weight: bold;
				padding: 45rpx 0 42rpx;
			}

			background-color: #ffffff;
			width: 100%;
		}
	}
</style>